<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        .wrap {
            width: 600px;
            margin: 50px auto;
            margin-left: 150px;
        }

        .wrap .judgeBox img {
            width: 100%;
        }

        .wrap .judgeBox {
            position: relative;
        }

        .wrap .judgeBox .randBox {
            width: 60px;
            height: 60px;
            background-color: #fff;
            position: absolute;
            display: none;
        }

        .wrap .judgeBox .followBox {
            width: 60px;
            height: 60px;
            background-color: #fff;
            position: absolute;
            left: 0;
            top: 0;
            background: url(images/bg.png) no-repeat;
            background-size: 600px auto;
            display: none;
        }

        .dragBox {
            width: 600px;
            height: 40px;
            margin: 20px 0;
            background-color: grey;
            border-radius: 20px;
            position: relative;
        }

        .dragBox .ball {
            width: 60px;
            height: 60px;
            background-color: #6ff;
            position: absolute;
            left: 0px;
            top: -10px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="judgeBox">
            <img id="img" src="images/bg.png" alt="">
            <div class="randBox"></div>
            <div class="followBox"></div>
        </div>
        <div class="dragBox">
            <div class="ball"></div>
        </div>
    </div>
</body>
<script>



    // 等页面所有内容加载完毕之后执行  （?  因为页面中有自适应高度的图片）
    window.onload = function () {

        var wrap = document.querySelector(".wrap");
        var judgeBox = document.querySelector(".judgeBox");
        var dragBox = document.querySelector(".dragBox");
        var randBox = document.querySelector(".randBox");
        var followBox = document.querySelector(".followBox");
        var ball = document.querySelector(".ball");

        randBox.style.display = "block";
        followBox.style.display = "block";
        // 确定  randBox的随机范围
        var maxWidth = judgeBox.clientWidth - randBox.clientWidth;
        var maxHeight = judgeBox.clientHeight - randBox.clientHeight;
        // console.log(judgeBox.clientHeight, randBox.clientHeight)
        // console.log(maxWidth, maxHeight);

        // 随机一个坐标点
        var posX = Math.round(Math.random() * maxWidth);
        var posY = Math.round(Math.random() * maxHeight);

        // 如果 left  值小于300  距离左边太近  重新随机直到大于 300
        while (posX < 300) {
            var posX = Math.round(Math.random() * maxWidth);
        }

        // 确定  改变 randBox 的位置
        randBox.style.left = posX + "px";
        randBox.style.top = posY + "px";

        // 将  followBox中的背景图定位之相应的位置  保证与原图相符
        //    background-position: -450px -100px;
        // followBox.style.backgroundPosition = -posX + "px " + (-posY) + "px";
        followBox.style.backgroundPosition = `${-posX}px ${-posY}px`;

        // 确定 followBox  的位置
        followBox.style.left = 0 + "px";
        followBox.style.top = posY + "px";

        var isDrag = false;
        //鼠标拖拽三件套    onmousedown    onmousemove  onmouseup
        ball.onmousedown = function (e) {
            var e = e || window.event;
            // if (e.button == 0) {}
            isDrag = true;
            console.log(isDrag);
            // 确定鼠标按下的位置 相对于事件源 也就是 ball的偏移
            var remX = e.offsetX;
            // var remY = e.offsetY;


            document.onmousemove = function (e) {
                var e = e || window.event;
                // 确定每次鼠标移动时 ball的left值x 
                var x = e.pageX - dragBox.offsetLeft - remX;

                if (x < 0) {
                    x = 0;
                }
                if (x > maxWidth) {
                    x = maxWidth;
                }
                ball.style.left = x + "px";
                followBox.style.left = x + "px";

            }



        }
        document.onmouseup = function () {
            console.log(isDrag);
            if (isDrag) {
                isDrag = false;
                document.onmousemove = null;
                // if (followBox.offsetLeft == randBox.offsetLeft) {
                //     console.log("验证成功");
                // } else {
                //     console.log("验证失败");
                // }

                // 鼠标抬起时 判断 ball 是否在正确范围   [followBox.offsetLeft-2,followBox.offsetLeft+2]
                if (followBox.offsetLeft >= randBox.offsetLeft - 2 && followBox.offsetLeft <= randBox.offsetLeft + 2) {
                    console.log("验证成功");
                    // if (confirm("验证成功,是否跳转？")) {
                    location.href = "https://www.bilibili.com/";
                    // }

                } else {
                    console.log("验证失败");
                    // followBox.style.left = 0;
                    // ball.style.left = 0;

                    boxMove(3, function () {
                        setTimeout(function () {
                            var start = ball.offsetLeft;
                            var end = 0;
                            var speed = (end - start) / 25;
                            var timer = setInterval(function () {
                                ball.style.left = ball.offsetLeft + speed + "px";
                                followBox.style.left = followBox.offsetLeft + speed + "px";
                                // 临界值
                                if (ball.offsetLeft <= 0) {
                                    console.log(11111);
                                    clearInterval(timer);
                                    ball.style.left = "0px";
                                    followBox.style.left = "0px";
                                }
                            }, 10)
                        }, 600);
                    })




                }
            }



        }

        // wrap.style.marginLeft = 50 + "px";
        var time = null;

        // 抖动函数  i 决定抖动的次数  fn 回调函数 决定抖动执行完之后执行的代码
        function boxMove(i, fn) {
            console.log(i);
            if (i == 0) {
                clearTimeout(time);
                if (fn) {
                    fn();
                }
                return false;
            }
            wrap.style.marginLeft = wrap.offsetLeft - 8 + "px";
            time = setTimeout(function () {
                // clearTimeout(timer);
                wrap.style.marginLeft = wrap.offsetLeft + 8 + "px";
                setTimeout(function () {
                    i--;
                    boxMove(i, fn);
                }, 80)
            }, 80)
        }



    }



</script>

</html>